import React from 'react';
import ReactDOM from 'react-dom';
import QueueAnim from 'rc-queue-anim';
import { NavBar, SearchBar } from 'antd-mobile';

import './index.sass';

/**
 * title 标题
 * rightContent 右侧渲染的内容，数据形式
 * visible 显隐控制
 * onCannel 点击左上返回按钮调用函数
 * search 是否为可搜索
 * placeholder
 * onSubmit
 * cancelText
 * autoFocus
 */

export default class Modal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: props.visible
    };
  }
  _container = null;
  addModalContainer() {
    if (this._container === null) {
      this._container = document.createElement('div');
      this._container.className = 'crm-mobile-modal-container';
      document.body.appendChild(this._container);
    }
  }

  renderContent() {
    ReactDOM.unstable_renderSubtreeIntoContainer(
      this,
      <QueueAnim>
        <Content
          key={1}
          title={this.props.title}
          rightContent={this.props.rightContent}
          cancel={() => {
            this.removeModal();
          }}
          className={this.props.className}
          search={this.props.search}
          placeholder={this.props.placeholder}
          defaultValue={this.props.defaultValue}
          onSubmit={this.props.onSubmit}
          cancelText={this.props.cancelText}
          autoFocus={this.props.autoFocus}
        >
          {this.props.children}
        </Content>
      </QueueAnim>,
      this._container
    );
  }

  async removeModal() {
    if (this.state.visible !== undefined && this.props.onCannel) {
      this.props.onCannel();
    }else{
      ReactDOM.unmountComponentAtNode(this._container);
      document.body.removeChild(this._container);
      this._container = null;
    }
    // this.props.onCancel && this.props.onCancel();
  }
  showModal() {
    if (this._container) {
      const { visible } = this.state;
      // console.log('renderContent', visible)
      if (visible) {
        this.renderContent();
      } else if (!visible) {
        // this.removeModal();
      }
    }
  }
  componentWillReceiveProps(nextProps) {
    // console.log('2',nextProps.visible);
    if (nextProps.visible !== undefined && nextProps.visible === true) {
      this.addModalContainer();
    }else if(nextProps.visible !== undefined && nextProps.visible === false && this._container){
      ReactDOM.unmountComponentAtNode(this._container);
      document.body.removeChild(this._container);
      this._container = null;
    }
    this.setState({
      visible: nextProps.visible
    });
  }

  componentDidUpdate() {
    this.showModal();
  }

  componentDidMount() {
    this.addModalContainer();
    if (this.props.visible) {
      this.showModal();
    }
    // this.renderContent();
  }
  render() {
    return null;
  }
}

class Content extends React.Component {
  constructor(props) {
    super(props);
  }
  autoFocusInst
  componentDidMount(){
    if(__CLIENT__ && this.props.autoFocus){
      this.autoFocusInst.focus();
    }
  }
  render() {
    return (
      <div style={{overflowY: this.props.search === true ? 'hidden' : 'auto'}} className={`crm-mobile-modal-content ${this.props.className || ''}`}>
        {this.props.search !== true && (
          <NavBar mode="dark" leftContent={this.props.cancelText || '返回'} onLeftClick={this.props.cancel} rightContent={this.props.rightContent}>
            {this.props.title}
          </NavBar>
        )}
        {this.props.search === true && (
          <SearchBar
            ref={ref => this.autoFocusInst = ref} 
            placeholder={this.props.placeholder || ''}
            defaultValue={this.props.defaultValue || undefined}
            onSubmit={value => {
              this.props.onSubmit && this.props.onSubmit(value);
            }}
            onClear={value => {
              this.props.onClear && this.props.onClear(value);
            }}
            onCancel={() => this.props.cancel()}
            showCancelButton
            cancelText={this.props.cancelText || '关闭'}
            onChange={() => {
              this.props.onChange && this.props.onChange();
            }}
          />
        )}
        <div className={this.props.search === true ? 'crm-mobile-modal-search-content' : ''}>
        {this.props.children}
        </div>
      </div>
    );
  }
}
